<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/table.css" th:href="@{/css/table.css}" type="text/css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/ajaxfileupload.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
</head>
<body class="bodystyle">
<div>
    <h1 align="center">软通云-随存通</h1>
</div>
<div id="curdir" style="text-align: center;">
    <label for="textfield" id="label1">当前路径:&nbsp;</label>
    <input id="textfield" th:value="${cdir}">
    <input type="text" id="text-search"></input>
    <button id="es-search" onclick="search()" class="btn btn-outline-primary">搜索</button>
</div>
<div class="kit">
    <div align="left" style="float:left"><button type="button" class="kitbtn" id="mkdir_btn" onclick="ck()">创建文件夹</button></div>
    <div align="right"><button type="button" class="kitbtn" id="upfile_btn">上传文件</button></div>
</div>
<table id="table-6" frame="below">
    <thead align="center">
    <tr>
        <th>图标</th>
        <th>文件名</th>
        <th>大小</th>
        <th>所有者</th>
        <th>修改时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="hdfile,infoStat:${hdfiles}">
        <td> <img th:src="*{hdfile.isIsdir()} ? '/images/director.png' : '/images/file.png'" width="20%"></td>
        <td th:if="*{hdfile.isIsdir()}"><a th:href="@{'/hdfslist?dir='+${hdfile.getPath()}}" th:text="*{hdfile.getPath().replace(cdir+'/','')}" th:id="'fname'+${infoStat.count}">path</a></td>
        <td th:if="*{hdfile.isIsdir() == false}" th:text="*{hdfile.getPath().replace(cdir+'/','')}" th:id="'fname'+${infoStat.count}">path</td>
        <td th:text="*{hdfile.getLength()}">size</td>
        <td th:text="*{hdfile.getOwner()}">owner</td>
        <td th:text="*{hdfile.getModification_time()}">time</td>
        <td>
            <button class="mybutton" th:onclick="del('[[${infoStat.count}]]')">删除</button>
            <button class="mybutton" th:onclick="download('[[${infoStat.count}]]')" th:if="${!hdfile.isIsdir()}">下载</button>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script th:inline="javascript">
    function download(cid) {
        var fid = 'fname'+cid;
        console.log(fid);
        var getdir = document.getElementById("textfield").value;
        var getname = document.getElementById(fid).innerHTML;
        console.log(getdir+getname);
        window.location.href = "http://localhost:8080/getdir?fdir="+getdir+'/'+getname;
    }
    function del(cid) {
        var fid = 'fname'+cid;
        console.log(fid);
        var deldir = document.getElementById("textfield").value;
        var delname = document.getElementById(fid).innerHTML;
        console.log(deldir+delname);
        window.location.href = "http://localhost:8080/delf?deldir="+deldir+'/'+delname;
    }
</script>
<script type="text/javascript">
    var ck = function(){
        var dir = document.getElementById("textfield").innerHTML;
        var name = prompt("请输入文件夹名称");
        window.location.href = "http://localhost:8080/mkdir?newdir="+dir+"/"+name;
    };
    var ck_upload = function(){
        var dir_remote = document.getElementById("textfield").innerHTML;
        var dir_local = prompt("请输入文件/文件夹绝对路径");
        console.log(dir_remote);
        console.log(dir_local);
        window.location.href = "http://localhost:8080/hdput?local="+dir_local+"&remote=/"+dir_remote;
    }

    var search =function (){
        var keys=document.getElementById("text-search").value;
        console.log(keys);
        window.location.href="http://localhost:8080/search?str="+keys;
    }
</script>

<script>
    layui.use('upload', function(){
        var upload = layui.upload;
        var dir=document.getElementById("textfield").value;
        //执行实例
        var uploadFile = upload.render({
            elem: '#upfile_btn' //绑定元素
            ,accept: 'file'
            ,data:{
                path:dir
            }
            ,url: 'hdputTest' //上传接口
            ,done:function (result){
                alert("上传成功");
                location.reload();
            }
            ,error: function(result,res){
                //上传完毕回调
                alert("上传失败"+res);
                location.reload();
            }
        });
    });
</script>
</html>